<template>
    <div class="tag-selector">
        <!-- 已选中的标签 -->
        <div class="selected-tags">
            <span v-for="tag in tagRange" :key="tag.id" class="tag selected" >
                {{ tag.name }} <span @click="removeTag(tag.id)"> ×</span>
            </span>
            <span v-if="tagRange.length === 0" class="placeholder">请选择标签</span>
        </div>
        <!-- <div class="selected-tags">
            <span v-for="tag in selectedJson" :key="tag.id" class="tag selected" @click="removeTag(tag.id)">
                {{ tag.name }} ×
            </span>
            <span v-if="selectedJson.length === 0" class="placeholder">请选择标签</span>
        </div> -->
        <div style=" margin: 1vw 0vw;"></div>
        <!-- 所有可选标签 -->
        <div class="all-tags">
            <span v-for="tag in allTags" :key="tag.value" :class="['tag', { active: isSelected(tag.value) }]"
                @click="toggleTag(tag)">
                {{ tag.label }}
            </span>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits,onMounted, watch } from 'vue';

// 接收 props
const props = defineProps({
    allTags: {
        type: Array,
        required: true,
        default: () => []
    },
    selectedIds: {
        type: Array,
        default: () => []
    },
    selectedJson: {
        type: Array,
        default: () => []
    }
});
const tagRange = ref([])
// 定义事件
const emit = defineEmits(['update:selectedIds', 'update:selectedJson', 'change']);

// 判断某个标签是否已选中
const isSelected = (id) => {
    return props.selectedIds.includes(id);
};


watch(() => props.selectedIds, (newIds) => {
    let arr = []
    for(let i of props.allTags) {
        if(newIds.includes(i.value)) {
            arr.push({
                id: i.value,
                name: i.label
            })
        }
    }
    tagRange.value = arr
    let Ids = [];
    for(let i of tagRange.value) {
        Ids.push(i.id)
    }
    // emit('update:selectedIds', Ids);
    // // 避免重复设置
    emit('update:selectedJson', JSON.stringify(arr) );
    emit('change', arr);
}, { immediate: true });


// 添加或移除标签 
const toggleTag = (tag) => {
    // 添加
    tagRange.value.push({
        id: tag.value,
        name: tag.label
    })
    let newIds = [];
    for(let i of tagRange.value) {
        newIds.push(i.id)
    }
    emit('update:selectedIds', newIds);
    emit('update:selectedJson', JSON.stringify(tagRange.value));
    emit('change', tagRange.value);
};

// 移除单个标签
const removeTag = (id) => {
    console.log(id, "删除");

   
    tagRange.value = tagRange.value.filter(tag => tag.id !== id);

   
    let newIds = tagRange.value.map(tag => tag.id);
    let newJson = tagRange.value;

    emit('update:selectedIds', newIds);
    emit('update:selectedJson', JSON.stringify(newJson));
    emit('change', newJson);
};
// const removeTag = (id) => {
//     console.log(id,"删除");
    
//     const newIds = props.selectedIds.filter(tagId => tagId !== id);
//     const newJson = props.selectedJson.filter(tag => tag.id !== id);

//     console.log(newIds);
//     console.log(newJson);
    

//     emit('update:selectedIds', newIds);
//     emit('update:selectedJson', newJson);
//     emit('change', selectedJson.value);
// };
</script>

<style scoped>
.tag-selector {
    padding: 10px;
    max-width: 600px;
    overflow-y: auto;  
    height: calc(100% - 20px);
    border-radius: 8px;
}

.tag-selector::-webkit-scrollbar {
    width: 6px;
}

.tag-selector::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.selected-tags,
.all-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom:1vw;
}

.tag {
   
    padding: 0vw 0.3vw;
    border-radius: 0.3vw;
    cursor: pointer;
    font-size: var(--text-12);
    transition: all 0.2s ease;
     color: var( --color-text-6);
    border: 0.5px solid var(--border-color-d9);
}

.tag:hover {
    background-color: #e0e0e0;
}

.tag.active {
    
     background-color: #e0e0e0;
    color: var( --color-text-6);
}

.selected-tags .tag.selected {
    background-color: #d1000d;
    color: white;
}

.placeholder {
    color: #aaa;
    font-size: 14px;
}
</style>